import React, { Fragment } from "react";


export default class Draggable extends React.Component {
  handleDragStart = (e) => {
    const { id, componentType } = this.props

    e.dataTransfer.setData("id", id);
    e.dataTransfer.setData("componentType", componentType);
    this.props.onDragStart(id);
  };
  render() {
    let {
      id,
      active,
      onDragEnd,
      children,
      isDragDisabled = false
    } = this.props;
    return (
      <div
        onDragStart={this.handleDragStart}
        onDragEnd={(e) => { onDragEnd && onDragEnd(e) }}
        id={`item-${id}`}
        className={(active ? " active" : "")}
        draggable={!isDragDisabled}
      >
        {children}
      </div>
    );
  }
}